<template>
  <div>
      <h3>我是动态组件</h3>
      <button @click="changeViewHandle">切换视图显示</button>
      <keep-alive>
          <component :is="currentComponent"></component>
      </keep-alive>
  </div>
</template>

<script>

import Child1 from "./Child1" 
// import Child2 from "./Child2"
const Child2 = () => import ("./Child2");

export default {
    data(){
        return{
            currentComponent:Child1,
            msg:"我是Component"
        }
    },
    components:{
        Child1,
        Child2
    },
    methods:{
        changeViewHandle(){
            if(this.currentComponent === Child1){
                this.currentComponent = Child2
            }else{
                this.currentComponent = Child1
            }
        }
    }
}
</script>

<style>

</style>